<template>
	<view class="page">
    <u-cell-group style="margin-top: 10pt;">
      <u-field v-model="mount" label="数量" placeholder="请输入" type="number"></u-field>
    </u-cell-group>
    <button type="default" class="submit-btn" @click="getQrcode()">确定生成二维码</button>
    <uni-popup ref="qrcodepopup" type="center" @change="handlerPopupStatusChenge">
			<view id="qrcodepopup">
				<view class="tip">
					<text>向商家展示此二维码</text>
				</view>
				<view class="qrcode" v-if="qrcodeValue">
					<image :src="qrcodeValue" mode=""></image>
				</view>
        <view class="tip">
					<text>{{mount}}积分</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Qr from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
        mount: '',
        qrcodeValue: '',
        showQrcodepopup: false
			}
    },
    onBackPress() {
			if (this.showQrcodepopup) {
				this.$refs['qrcodepopup'].close();
				return true;
			}
		},
		methods: {
      handlerPopupStatusChenge: function(e) {
				this.showQrcodepopup = e.show;
				if (!e.show) {
					this.qrcodeValue = '';
				}
			},
      getQrcode: function () {
        var mount = parseInt(this.mount);
        if (mount > 0) {
          this.$refs['qrcodepopup'].open();
          this.qrcodeValue = Qr.createQrCodeImg(this.mount + '');
        } else {
          uni.showToast({ title: "请输入", position:'bottom', icon: 'none' });
        }
      }
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
page{
  background-color: #f7f7f7;
}
// #ifdef APP-PLUS
.page {
  background-color: #f7f7f7;
  height: 100vh;
  overflow: hidden;
}
// #endif
.submit-btn {
  border-radius: 40px;
}
#qrcodepopup {
	background: #fff;
	width: 200px;
	border-radius: 10px;
	height: 230px;
	position: absolute;
	left: calc(50% - 100px);
	top: calc(50% - 115px);
	.qrcode {
    width: 140px;
    height: 140px;
    margin: 0 auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tip {
		text-align: center;
		display: flex;
		flex-direction: column;
    align-items: center;
    height: 40px;
    line-height: 40px;
		text {
			padding: 5px 0;
		}
	}
}
</style>